<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>用户列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../res/css/wholesale/font.css">
  <link rel="stylesheet" href="../../res/css/wholesale/xadmin.css">
  <link rel="stylesheet" href="../../res/layui/css/layui.css">
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="../../res/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="../../res/js/wholesale/xadmin.js"></script>

  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body> 
<div class="demoTable" style="margin-top: 10px;">
    <div class="x-body">
      <div class="layui-row">
        <div class="layui-form layui-col-md12 x-so">
          <input type="text" name="buName" id="userName" placeholder="请输入用户姓名" autocomplete="off" class="layui-input">
          <div class="layui-input-inline">
            <select name="site" id="company">
            <option value="">请选择公司：</option>
            </select>
          </div>
          <input class="layui-input" placeholder="开始日" name="timaStart" id="timaStart" readonly>
          - <input class="layui-input" placeholder="截止日" name="timeEnd" id="timeEnd" readonly>
          <input type="text" name="oper" id="oper" placeholder="请输入操作人" autocomplete="off" class="layui-input">
          <button class="layui-btn" data-type="reload" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
        </div>
      </div>
      <xblock>
        <button class="layui-btn" id="insert"><i class="layui-icon"></i>添加</button>
      </xblock>

<table class="layui-table" lay-data="{url:'../../listenBackstageUser/getAllState.action', page:true, id:'idTest'}" lay-filter="demo">
  <thead>
    <tr>
      <th lay-data="{field:'buName',align:'center'}">用户姓名</th>
      <th lay-data="{field:'buPwd',align:'center'}">用户密码</th>
      <th lay-data="{field:'buPhone',align:'center'}">用户电话</th>
      <th lay-data="{field:'companyName',align:'center'}">公司名称</th>
      <th lay-data="{field:'buRemarks',align:'center'}">备注</th>
      <th lay-data="{field:'openStringTime',align:'center'}">操作时间</th>
      <th lay-data="{field:'oper',align:'center'}">操作人</th>
      <th lay-data="{field:'isva',width:90,align:'center',templet: '#switchTpl', unresize: true}">是否有效</th>
      <th lay-data="{fixed: 'right',width:148,align:'center', toolbar: '#barDemo'}">操作</th>
    </tr>
  </thead>
</table>
 </div>
 </div>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class='layui-icon'></i>修改</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class='layui-icon'></i>删除</a>
</script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="text/html" id="switchTpl">
    <a lay-event="enableOrDisable"><input type="checkbox" name="isva" value="{{d.isva}}" lay-skin="switch" lay-text="有效|无效" lay-filter="sexDemo" {{ d.isva == 1 ? 'checked' : '' }}></a>
</script>
<script>
layui.use('laydate', function(){
    var laydate = layui.laydate;
    
    var end = laydate.render({
    	elem: '#timeEnd', //指定元素
    	done:function(value,date){
    		start.config.max={
   				year:date.year,
   				month:date.month-1,
   				date:date.date
    		}
    	}
    })
    
    var start = laydate.render({
    	elem: '#timaStart', //指定元素
    	done:function(value,date){
    		end.config.min={
   				year:date.year,
   				month:date.month-1,
   				date:date.date
    		}
    	}
    })
    
  //执行一个laydate实例
    laydate.render({
      elem: '#timaStart' //指定元素
    });

    //执行一个laydate实例
    laydate.render({
      elem: '#timeEnd' //指定元素
    });
    
  });
layui.use('table', function(){
  var form=layui.form;
  var table = layui.table;
  //监听工具条
  table.on('tool(demo)', function(obj){
	  window.reloadView = function () {
          window.location.reload();
      }

    var da = obj.data;
    //删除
    if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
      	layer.close(index);
          obj.del();
          var url='../../listenBackstageUser/delete.action';
          var data={"id":da.buId};
          $.post(url,data,function(mes){
        	  if(mes.datas==5){
  				layer.msg(mes.msg);
			  }else{
				layer.msg("删除失败");
			  }
          },"json");
        });
    //修改
    } else if(obj.event === 'edit'){
    	layer.open({
  		  type: 2, //设置为iframe
  		  fix: false, //不固定
		  maxmin: true,
	      shadeClose: true,
	      shade:0.4,
  		  title:'修改',
  		  area: ['400px', '450px'],
  		  content: ['insertOrUpdate.html', 'no'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
  		  ,success: function(layero, index){
  			var url='../../listenBackstageUser/display.action';
  	    	var data={"id":da.buId};
  	    	var body = layer.getChildFrame('body', index);
			var iframe = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
  	    	$.post(url,data,function(mes){
  	    			iframe.$("#id").val(mes.buId);
					iframe.$("#buName").val(mes.buName);
					iframe.$("#buPwd").val(mes.buPwd);
					iframe.$("#buPhone").val(mes.buPhone);
					iframe.$("#companyId").val(mes.companyId);
					iframe.$("#isva").val(mes.isva);
					iframe.$("#buRemarks").val(mes.buRemarks);
					//调用子页面渲染的方法
					iframe.load();
  	    	},"json");
  		  } 
  	  }); 
    } else if(obj.event === 'enableOrDisable'){
		var url='../../listenBackstageUser/enableOrDisable.action';
		var data={"id":da.buId,"isva":da.isva};
		$.post(url,data,function(mes){
			if(mes.datas==3){
				layer.msg(mes.msg);
				//一秒后刷新
			    setInterval('reloadView()',800); 
			}else{
				layer.msg("启用成功");
				//一秒后刷新
				setInterval('reloadView()',800); 
			}
		},"json");
		
    }
  });
  
  //表单重载
  var $ = layui.$, active = {
		    reload: function(){
		      var userName = $('#userName');
		      var company = $('#company');
		      var timaStart = $('#timaStart');
		      var timeEnd = $('#timeEnd');
		      var oper = $('#oper');
		      
		      //执行重载
		      table.reload('idTest', {
		        page: {
		          curr: 1 //重新从第 1 页开始
		        }
		        ,where: {
		           key: {
					userName: userName.val(),
					company: company.val(),
					timaStart: timaStart.val(),
					timeEnd: timeEnd.val(),
					oper: oper.val()
		          } 
		        }
		      });
		    }
		  };
  
  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
  /**
  * 增加
  */
  $('#insert').on('click', function(){
	  layer.open({
		  type: 2, //设置为iframe
		  fix: false, //不固定
		  maxmin: true,
	      shadeClose: true,
	      shade:0.4,
  		  title:'增加',
  		  area: ['400px', '450px'],
		  content: ['insertOrUpdate.html', 'no'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
	  }); 
	          
  });
  var url="../../listenCompany/queryAllzwm.action";
  var data=null;
  $.post(url,data,function(mes){
	  $.each(mes,function(index,item){
		  $("#company").append("<option></option><option value="+item.companyId+">"+item.companyName+"</option>");
		  form.render();
	  });
  },"json");
});
</script>

</body>
</html>